<template>
  <div class="main-banner app-container">
    <div class="el-row" style="margin-left: -2.5px; margin-right: -2.5px;">
<!--      style="padding-left: 2.5px; padding-right: 2.5px;"-->
      <div class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
        <div class="main-banner-left">
          <el-carousel style="height: 600px;"
                       arrow="never" indicator-position="none" :interval="5000"
                       :pause-on-hover="false"
          >
            <el-carousel-item v-for="(item, index) in lists" :key="index">
              <img :src="item.pic" alt="" style="width: 100%;height: 600px;">
            </el-carousel-item>
          </el-carousel>
          <div class="el-loading-mask" style="display: none;">
            <div class="el-loading-spinner">
              <svg viewBox="25 25 50 50" class="circular">
                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
              </svg><!----></div>
          </div>
        </div>
      </div>
<!--      <div class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-10 el-col-lg-10 el-col-xl-10"-->
<!--           style="padding-left: 2.5px; padding-right: 2.5px;">-->
<!--        <div class="main-banner-right flex-start">-->
<!--          <div class="main-banner-right-group">-->
<!--            <div class="swiper-container">-->
<!--              <el-carousel height="152px"-->
<!--                           arrow="never" indicator-position="none" :interval="5000"-->
<!--                           :pause-on-hover="false"-->
<!--              >-->
<!--                <el-carousel-item>-->
<!--                  <img src="@/assets/images/home-banner-img1.jpeg" alt="">-->
<!--                </el-carousel-item>-->
<!--                <el-carousel-item>-->
<!--                  <img src="@/assets/images/home-banner-img2.jpeg" alt="">-->
<!--                </el-carousel-item>-->
<!--              </el-carousel>-->
<!--            </div>-->
<!--            <div class="swiper-container">-->
<!--              <el-carousel height="152px"-->
<!--                           arrow="never" indicator-position="none" :interval="5000"-->
<!--                           :pause-on-hover="false"-->
<!--              >-->
<!--                <el-carousel-item>-->
<!--                  <img src="@/assets/images/home-banner-img3.jpeg" alt="">-->
<!--                </el-carousel-item>-->
<!--                <el-carousel-item>-->
<!--                  <img src="@/assets/images/home-banner-img4.jpeg" alt="">-->
<!--                </el-carousel-item>-->
<!--              </el-carousel>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="main-banner-right-group">-->
<!--            <div class="swiper-container">-->
<!--              <el-carousel height="152px"-->
<!--                           arrow="never" indicator-position="none" :interval="5000"-->
<!--                           :pause-on-hover="false"-->
<!--              >-->
<!--                <el-carousel-item>-->
<!--                  <img src="@/assets/images/home-banner-img5.jpeg" alt="">-->
<!--                </el-carousel-item>-->
<!--                <el-carousel-item>-->
<!--                  <img src="@/assets/images/home-banner-img6.jpeg" alt="">-->
<!--                </el-carousel-item>-->
<!--              </el-carousel>-->
<!--            </div>-->
<!--            <div class="swiper-container">-->
<!--              <el-carousel height="152px"-->
<!--                arrow="never" indicator-position="none" :interval="5000" :pause-on-hover="false">-->
<!--                <el-carousel-item>-->
<!--                  <img src="@/assets/images/home-banner-img7.jpeg" alt="">-->
<!--                </el-carousel-item>-->
<!--              </el-carousel>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-loading-mask" style="display: none;">-->
<!--            <div class="el-loading-spinner">-->
<!--              <svg viewBox="25 25 50 50" class="circular">-->
<!--                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>-->
<!--              </svg>&lt;!&ndash;&ndash;&gt;</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
  lists: {
    type: Array,
    default: () => {
      return []
    }
  }
})
</script>
<style scoped>
.main-banner-left {
  height: 600px
}

.main-banner-left .swiper-container {
  height: 600px!important;
  cursor: pointer
}
:deep(.el-carousel__container){
  height: 600px;
}

.main-banner-left .swiper-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  image-rendering: pixelated
}

.main-banner-right-group {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  width: 100%
}

.main-banner-right-group .swiper-container {
  height: 152px;
  width: 242px;
  margin-bottom: 6px;
  cursor: pointer
}

.main-banner-right-group .swiper-container:last-child {
  margin-bottom: 0
}

.main-banner-right-group .swiper-container .swiper-slide {
  height: 152px;
  width: 242px;
  overflow: hidden
}

.main-banner-right-group .swiper-container .swiper-slide>img {
  width: 100%;
  height: 100%
}

.main-banner-right-group img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.main-banner-Argos {
  height: 400px
}

.main-banner-Argos .swiper-container {
  height: 400px!important;
  cursor: pointer
}

.main-banner-Argos .swiper-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  image-rendering: revert
}

</style>